<template>
  <div class="margin-box">
    <div class="card-box">
      <div class="card-title">资料信息</div>
      <div class="batchImport-main">
        <div class="batchImport-steps">
          <el-steps :active="active" finish-status="success" align-center>
            <el-step title="第一步"></el-step>
            <el-step title="第二步"></el-step>
            <el-step title="第三步"></el-step>
          </el-steps>
          <div v-if="active === 0">
            <div class="step-first">
              <div class="el-icon-upload one ones"></div>
              <div class="step-first-text">
                <h2>填写导入的信息</h2>
                <p>请按照收据模板的格式准备导入数据，模板中的表头名称不可更改， 表头行不能删除，单次导入的数据不超过1000条。</p>
                <el-button class="el-icon-download two" type="info" @click="handleDownTemplate">下载模板</el-button>
              </div>
            </div>
            <div class="step-first step-first-last">
              <div class="el-icon-upload one"></div>
              <div class="step-first-text">
                <h2>上传填好的公共服务设施导入表</h2>
                <p>请按照收据模板的格式准备导入数据，模板中的表头名称不可更改， 表头行不能删除，单次导入的数据不超过1000条。</p>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :limit="1"
                  action="/admin/sys-file/upLodeFileAdd"
                  :on-remove="handleRemove"
                  :on-change="file => {handleChange(file)}"
                  :auto-upload="false"
                >
                  <el-button class="el-icon-upload2 two" type="info">上传文件</el-button>
                </el-upload>
              </div>
            </div>
          </div>
          <div v-if="active === 1">
            <el-tabs v-model="activeName" @tab-click="handleTabClick">
              <el-tab-pane name="first">
                <span slot="label">
                  <h3 style="font-weight: 500;">总共添加（{{batchImportTableData.successfulSize}}）</h3>
                </span>
                <el-table :data="batchImportTableData.successfulData" align="center" ref="multipleTable">
                  <el-table-column label="序号" prop="excelRow"></el-table-column>
                  <el-table-column label="街道" prop="streetName"></el-table-column>
                  <el-table-column label="社区名称" prop="communityName"></el-table-column>
                  <el-table-column label="管理人口" prop="population"></el-table-column>
                  <el-table-column label="设施类型" prop="facilitiesType"></el-table-column>
                  <el-table-column label="具体类型" prop="facilitiesSubtype"></el-table-column>
                  <el-table-column label="近期需求" prop="reqNum"></el-table-column>
                  <el-table-column label="需求个数" prop="requirements"></el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane name="second">
                <span slot="label">
                  <h3 style="font-weight: 500;">异常情况（{{batchImportTableData.errorSize}}）</h3>
                </span>
                <div class="step-second">
                  <h3>异常提示：</h3>
                  <p v-for="(item,index) in batchImportTableData.errorData" :key="index">{{item}}</p>
                  <el-button class="step-second-btn" @click="handleDownError">导出异常数据</el-button>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div v-if="active === 2">
            <div class="step-third">
              <img :src="Smile" />
              <h2>批量导入完成</h2>
              <p>成功导入{{submitData}}条数据</p>
            </div>
          </div>
        </div>
        <div class="batchImport-btn">
          <el-button style="margin-top: 12px;" v-if="active == 1" @click="handleClickPrev">上一步</el-button>
          <el-button style="margin-top: 12px;" v-if="active == 0 || active == 1" @click="handleClicknext">下一步</el-button>
          <el-button style="margin-top: 12px;" v-if="active == 2" @click="handleClickSubmit">完成</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script src="./batchImport.js">

</script>

<style scoped lang="scss">
@import "./batchImport";
</style>
